<template>
  <view :class="$style.linkage_container">
    <view :class="$style.title">{{ titleName }}</view>
    <!-- <view :class="$style.statistic" class="flex justify-center items-baseline">
      <text :class="$style.number">{{ linkageForceInfo.length }}</text>
      <text :class="$style.text">支</text>
    </view> -->

    <view :class="$style.content">
      <view v-for="(it, index) in linkageForceInfo" :key="index" @click="getPersonnel(it)" style="margin-top:20rpx">
        <view style="display:flex; position: relative;">
          <image :src="it.yjlddwlxtbdz" style="width:40rpx;height: 40rpx; margin-right: 20rpx;"></image>
          <view>{{ it.dwlbmc }}</view>
          <view :class="$style.state" v-show='it.sfdc == 1'>到场</view>
          <view :class="$style.operation">
            <image :src="dropDownImg" mode="widthFix" style="width: 28rpx;" v-show="it.showPage" />
            <image :src="foldUpImg" mode="widthFix" style="width: 28rpx;" v-show="!it.showPage" />
          </view>
        </view>
        <view v-for="(item, index) in it.lqLdllInfoList" :key="index" class="flex justify-between"
          style="margin:20rpx 0" v-show="it.showPage">
          <view :class="$style.power_info" class="flex">
            <image src="" mode="widthFix" style="width: 40rpx; height: 40rpx;" />
            <view :class="$style.contact_name">{{ item?.xm }}</view>
            <view :class="$style.organization">{{ item?.dwmc }}</view>
            <view :class="$style.state" v-show='item.sfdc == 1'>到场</view>
          </view>
          <image :src="phoneImg" mode="widthFix" style="width: 40rpx; margin-right: 20rpx;"
            @click="callUpToPhone(item.lxdh || '')" />
        </view>
      </view>
    </view>
  </view>

</template>

<script setup lang='ts'>
import { ref } from "vue";
import phoneImg from "@/static/images/alert-detail/phone.png";
import dropDownImg from "@/static/images/common/drop_down.png";
import foldUpImg from "@/static/images/common/fold_up.png";
import { callUpToPhone } from '@/utils'


const titleName = ref<string>("联动力量");
interface Props {
  linkageForceInfo: any
};
const {
  linkageForceInfo = {},
} = defineProps<Props>();

function getPersonnel(item: any) {
  item.showPage = !item.showPage
}
</script>

<style lang='less' module>
.linkage_container {
  width: calc(100% - 60rpx);
  min-height: 100rpx;
  box-sizing: border-box;
  background: #ffffff;
  box-shadow: 0rpx 4rpx 19rpx 1rpx rgba(51, 51, 51, 0.2);
  padding: 10rpx 10rpx 10rpx 20rpx;
  border-radius: 20rpx;
  font-family: Microsoft YaHei;

  .title {
    font-size: 30rpx;
    font-weight: bold;
    color: #333333;
  }

  .statistic {
    font-weight: bold;
    color: #2264d3;
    line-height: 40px;

    .number {
      font-size: 60rpx;
    }

    .text {
      font-size: 26rpx;
    }
  }

  .content {
    font-size: 26rpx;
    font-weight: 400;
    color: #999999;

    .operation {
      position: absolute;
      right: 20rpx;
      top: 0rpx;
    }

    .organization {
      margin-left: 15rpx;
    }

    .contact_name {
      margin-left: 15rpx;
    }

    .state {
      margin-left: 20rpx;
      background: #00d195;
      border-radius: 8rpx;
      padding: 5rpx 10rpx;
      min-width: 60rpx;
      height: 30rpx;
      text-align: center;
      font-size: 22rpx;
      color: #ffffff;
    }
  }
}
</style>
